<template>
  <view class="buy-percent-container">
    <view
      class="buy-percent-item"
      v-for="(item, index) in stops"
      :key="index"
      @click="onClick(item)"
    >
      <view
        class="percent-bar"
        :class="{
          active: stop >= item,
          buy: direction == 0,
          sell: direction == 1,
        }"
      ></view>
      <view class="percent-label" :class="{ active: stop >= item }">
        {{ toPercent(item) }}
      </view>
    </view>
  </view>
</template>

<script>
import { MathTimes } from "@/utils/math.js";

export default {
  props: {
    direction: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      stop: undefined,
      stops: [0.25, 0.5, 0.75, 1],
    };
  },
  mounted() {},
  methods: {
    reset() {
      this.stop = undefined;
    },
    toPercent(num) {
      return `${MathTimes(num, 100)}%`;
    },
    onClick(item) {
      this.stop = item;
      this.$emit("change", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.buy-percent-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.buy-percent-item {
  flex-basis: 0;
  flex-grow: 1;
  margin-right: 10rpx;
  &:last-child {
    margin-right: 0;
  }
}

.percent-bar {
  background-color: var(--input-background);
  height: 20rpx;
  border-radius: 4rpx;
  transition: opacity 0.2s;
  &.active {
    &.buy {
      background-color: var(--up-color);
    }
    &.sell {
      background-color: var(--down-color);
    }
  }
}

.percent-label {
  margin-top: 20rpx;
  font-size: 24rpx;
  text-align: center;
  color: var(--text-color-2);
  &.active {
    color: var(--text-color);
  }
}
</style>
